<template>
  <div>
    <div>
      <TaiTitle title="业主信息">
        <el-button class="mt5" link type="warning" @click="handleBaseInfoEdit">编辑</el-button>
      </TaiTitle>
      <div class="primary-section mt20">
        <el-form label-width="80px">
          <el-row>
            <el-col :span="12" :xs="24">
              <el-form-item label="姓名">名字</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="证件号">410901199103042311</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="联系方式">15985807150</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="入住周期">2023-03-25至2026-12-30</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="月租金">500</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="押金">500</el-form-item>
            </el-col>
            <el-col :span="24" :xs="24">
              <el-form-item label="付款方式">每一月</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="收款银行">--</el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="收款账号">--</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="mt20">
      <TaiTitle title="备注" class="mb20">
        <el-button class="mt5" link type="warning" @click="handleRemark">编辑</el-button>
      </TaiTitle>
      <div class="primary-section pv-12">
        备注信息可以是啥时候圣诞节快乐风含水量大姐夫凉快圣诞节来了可接受的了看见爱上
      </div>
    </div>
    <div class="mt20">
      <TaiTitle title="视频图片" class="mb20">
        <el-button class="mt5" link type="warning">编辑</el-button>
      </TaiTitle>
      <div class="primary-section pv-12"  style="color: var(--el-text-color-secondary);">
        暂无视频图片
      </div>
    </div>
    <!-- 入住人基本信息编辑弹窗 -->
    <el-dialog title="入住人基本信息" v-model="baseInfoVisible" width="550px" :fullscreen="mobile">
      <el-form :model="baseInfoForm" ref="baseInfoFormRef" :rules="baseInfoRules" label-width="80px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="姓名" prop="renterName">
              <el-input v-model="baseInfoForm.renterName" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="联系方式" prop="contacts">
              <el-input v-model="baseInfoForm.contacts" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="证件号" prop="idNumber">
              <el-input v-model="baseInfoForm.idNumber" placeholder="请输入证件号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-icon class="mt10 ml10"><Wallet /></el-icon>
          </el-col>
          <el-col :span="24">
            <el-form-item label="入住周期" required>
              <el-row>
                <el-col :span="11">
                  <el-form-item label-width="0" prop="startDate">
                    <el-date-picker
                      v-model="baseInfoForm.startDate"
                      :editable="false"
                      type="date"
                      placeholder="请选择开始日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div style="text-align: center;">-</div>
                </el-col>
                <el-col :span="11">
                  <el-form-item label-width="0" prop="endDate">
                    <el-date-picker
                      v-model="baseInfoForm.endDate"
                      type="date"
                      :editable="false"
                      placeholder="请选择结束日期"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleBaseInfoClose">取消</el-button>
          <el-button type="primary" @click="handleBaseInfoOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑备注信息弹窗 -->
    <el-dialog title="编辑" v-model="remarkVisible" width="520px" :fullscreen="mobile">
      <el-form :model="remarkForm" ref="remarkFormRef" label-width="0">
        <el-form-item prop="remarks">
          <el-input type="textarea" v-model="remarkForm.remarks" :rows="4" maxlength="150" placeholder="请填写备注信息" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleRemarkClose">取消</el-button>
          <el-button type="primary" @click="handleRemarkOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="LodgingBlock">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const baseInfoVisible = ref(false)
const remarkVisible = ref(false)
const mobile = computed(() => useAppStore().device === 'mobile')

const data = reactive({
  baseInfoForm: {
    renterName: undefined,
    contacts: undefined,
    idNumber: undefined,
    startDate: '',
    endDate: ''
  },
  remarkForm: {
    remarks: undefined
  },
  baseInfoRules: {
    renterName: [{ required: true, message: "请输入名字", trigger: "blur" }],
    contacts: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    startDate: [{ required: true, type: 'date', message: "请选择开始日期", trigger: "blur" }],
    endDate: [{ required: true, type: 'date', message: "请选择结束日期", trigger: ["blur"] }],
  },
})
const { baseInfoForm, baseInfoRules, remarkForm } = toRefs(data)

// 入住人基本信息编辑
function resetBaseInfoForm() {
  baseInfoForm.value = {
    renterName: undefined,
    contacts: undefined,
    idNumber: undefined,
    startDate: '',
    endDate: ''
  }
  proxy.resetForm('baseInfoFormRef')
}
function handleBaseInfoEdit() {
  resetBaseInfoForm()
  baseInfoVisible.value = true
}
function handleBaseInfoClose() {
  baseInfoVisible.value = false
}
function handleBaseInfoOk() {
  proxy.$refs['baseInfoFormRef'].validate(valid => {
    if (valid) {
      baseInfoVisible.value = false
    }
  })
}

// 备注信息
function resetRemarkForm() {
  remarkForm.value = {
    remarks: undefined
  }
}
function handleRemark() {
  resetRemarkForm()
  remarkVisible.value = true
}
function handleRemarkOk() {
  // 判断表单值是否发生改变
  remarkVisible.value = false
}
function handleRemarkClose() {
  remarkVisible.value = false
}
</script>
